<template>
	<div class="toMlist">

<div class="tomlist">
	<div class="top" v-for="(item,index) in arr" :key="index" > 
		<img :src="item.img" alt="" :class="item.beg">
		<p>{{ item.text }}</p>
	</div>
</div>
	

	<div class="centers">
		<p> 为你心选</p>
		<van-dropdown-menu>
			<van-dropdown-item v-model="value1" :options="option1" />
			<van-dropdown-item v-model="value2" :options="option2" />
			<van-dropdown-item v-model="value2" :options="option3" />
		</van-dropdown-menu>
	</div>

	<div class="bottom">
		<div class="cai">
			<van-sticky :offset-top="50">
				<van-tabs>
					<van-tab title="全部"></van-tab>
				
						<van-tab title="公园乐园">
						</van-tab>
					
					<van-tab title="自然风景"></van-tab>
					<van-tab title="人文历史"></van-tab>
					<van-tab title="文化展馆"></van-tab>
					<van-tab title="建筑街区"></van-tab>
				</van-tabs>
			</van-sticky>
		</div>
	</div>
	</div>

</template>

<script>
export default {
	data() {
		return {
			value1: 0,
			value2: 'a',
			option1: [
				{ text: '全部景点', value: 0 },
				{ text: '公园乐园', value: 1 },
				{ text: '自然风景', value: 2 },
				{ text: '人文历史', value: 3 },
				{ text: '文化展馆', value: 4 },
				{ text: '建筑街区', value: 5 },
			],
			option2: [
				{ text: '朝阳区', value: 'a' },
				{ text: '海淀区', value: 'b' },
				{ text: '东城区', value: 'c' },
				{ text: '西城区', value: 'd' },
			],
			option3: [
				{ text: '智能排序', value: 'a' },
				{ text: '好评优先', value: 'b' },
				{ text: '销量优先', value: 'c' },
				{ text: '距离优先', value: 'd' },
				{ text: '通用排序', value: 'e' },
			],
			arr: [
				{ img: "https://gw.alicdn.com/imgextra/i1/O1CN01XDP2SC1jhggcu7X4V_!!6000000004580-2-tps-120-120.png_120x120Q100.jpg_.webp", text:"环球影城"},
				{ img: "https://img.alicdn.com/tfs/TB1YcAwFUY1gK0jSZFMXXaWcVXa-180-180.png_120x120Q100.jpg_.webp", text: "文化展馆", beg: "beg" },
				{ img: "https://img.alicdn.com/tfs/TB1WV7wFUT1gK0jSZFrXXcNCXXa-180-180.png_120x120Q100.jpg_.webp", text: "人文历史", beg: "beg1" },
				{ img: "https://img.alicdn.com/tfs/TB1tckuFLb2gK0jSZK9XXaEgFXa-180-180.png_120x120Q100.jpg_.webp", text: "自然风景", beg: "beg2" },
				{ img: "https://img.alicdn.com/tfs/TB1rBoAFQT2gK0jSZFkXXcIQFXa-180-180.png_120x120Q100.jpg_.webp", text: "公园乐园", beg: "beg3" },
				{ img: "https://img.alicdn.com/tfs/TB19XMuFFY7gK0jSZKzXXaikpXa-180-180.png_120x120Q100.jpg_.webp", text: "建筑街区", beg: "beg4" },
				{ img: "https://img.alicdn.com/tfs/TB11rEvFNz1gK0jSZSgXXavwpXa-180-180.png_120x120Q100.jpg_.webp", text: "空中项目", beg: "beg5" },
				{ img: "https://img.alicdn.com/tfs/TB1ZdMzFNv1gK0jSZFFXXb0sXXa-180-180.png_120x120Q100.jpg_.webp", text: "演出/赛事", beg: "beg6" },
				{ img: "https://img.alicdn.com/tfs/TB1AloAFQT2gK0jSZFkXXcIQFXa-182-180.png_120x120Q100.jpg_.webp", text: "休闲娱乐", beg: "beg7" },
			],
		};
	},
}
</script>

<style scoped>
.beg{
background: linear-gradient(to top, rgb(255, 235, 105) 0%, rgb(255, 196, 20) 50%);
}
.beg1{
	background: linear-gradient(to top, rgb(130, 233, 181) 0%, rgb(51, 203, 127) 50%);
}
.beg2{
	background: linear-gradient(to top, rgb(119, 205, 255) 0%, rgb(0, 162, 255) 50%);
}
.beg3{
	background: linear-gradient(to top, rgb(255, 139, 168) 0%, rgb(255, 51, 102) 50%);
}
.beg4{
	background: rgb(255, 140, 26);
}
.beg5{
	background: rgb(255, 77, 136);
}
.beg6{
	background: rgb(255, 187, 51);
}
.beg7{
	background: rgb(71, 179, 89);
}
.tomlist{
	width: 100%;
	overflow-x: scroll;
	white-space: nowrap;
	background-color: white;
}
.top{
	width: 1.2rem;
	height: 1.64rem;
	margin-left: .3rem;
	margin-top: .2rem;
	display: inline-block;
}
.top img{
	width: 1.1rem;
	height: 1.1rem;
	
	border-radius: 50%;
}
.top p{
	text-align: center;
	margin-top: .1rem;
}
.centers p{
	font-size: 20px;
	font-weight: 700;
	margin-left: .26rem;
	background-color: white;
}
::v-deep .van-dropdown-menu__title{
width: 2rem;
margin-left: .3rem;
				}
		::v-deep	.van-dropdown-menu__item{
			display: flex;
				justify-content: space-between;
		}
.cai {
	width: 7.5rem;
	margin-top: .2rem;
	line-height: 1rem;
	border-bottom: 1px solid transparent;
position: relative;
	top: -0.2rem;
}

::v-deep .van-button {
	width: 7.5rem;
}

/* van-tab  */
::v-deep .van-tab--active {
	width: 1.5rem;
	border: 1px solid rgba(202, 200, 200, 0.384);
	border-radius: .6rem;
	background-color: rgba(255, 221, 0, 0.648);
	margin-left: .1rem;
}

::v-deep .van-tabs__line {
	display: none;
}

::v-deep .van-tab {
	margin-top: 5px;
	margin-bottom: 5px;
	border: 1px solid rgb(238, 234, 234);
		border-radius: .6rem;
		margin-right: .2rem;
}
</style>